<template>
  <section
    id="blueprint-canvas"
    @wheel="wheel"
    @pointermove="pointermove"
    @pointerup="pointerup"
    @pointerdown="pointerdown"
    ref="blueprint"
  >
    <svg id="grid">
      <defs>
        <pattern id="pattern1" x="0" y="0" width=".1" height=".1">
          <line x1="0" y1="0" x2="0" y2="100%" class="grid-line-1"></line>
          <line x1="0" y1="0" x2="100%" y2="0" class="grid-line-1"></line>
        </pattern>
        <pattern id="pattern10" x="0" y="0" width="1" height="1">
          <line x1="0" y1="0" x2="0" y2="100%" class="grid-line-10"></line>
          <line x1="0" y1="0" x2="100%" y2="0" class="grid-line-10"></line>
        </pattern>
        <pattern
          id="gridPattern"
          x="0"
          y="0"
          :width="gridScale"
          :height="gridScale"
          patternUnits="userSpaceOnUse"
          :patternTransform="transform"
        >
          <rect
            id="gridPatternFill"
            fill="url(#pattern1)"
            :width="gridScale"
            :height="gridScale"
            x="0"
            y="0"
          ></rect>
          <rect
            fill="url(#pattern10)"
            width="100%"
            height="100%"
            x="0"
            y="0"
          ></rect>
        </pattern>
      </defs>
      <rect
        fill="url(#gridPattern)"
        width="100%"
        height="100%"
        x="0"
        y="0"
      ></rect>
      <g id="crosshairs" :transform="crosshairs_transform">
        <line x1="-100%" x2="100%" y1="0" y2="0"></line>
        <line x1="0" x2="0" y1="-100%" y2="100%"></line>
      </g>
    </svg>

    <div id="view-params">
      <div id="view" touch-action="none" class="noselect">
        <div id="view-svg-container" v-html="svg_html"></div>
        <svg id="pointers" xmlns="http://www.w3.org/2000/svg"></svg>
        <div id="touch-shield"></div>
      </div>
    </div>
  </section>
</template>

<script>
import makerjs from "makerjs";

export default {
  name: "Drawings",
  data: () => ({
    layer: 0,
    viewScale: 1,
    viewPanOffset: [0, 0],
    last_pointer_down: [0, 0],
    model: {
      paths: {},
      models: {},
    },
    margin: [0, 0],
  }),
  computed: {
    viewOrigin() {
      if (
        this.model.models &&
        Object.keys(this.model.models).length === 0 &&
        this.model.models.constructor === Object &&
        this.model.paths &&
        Object.keys(this.model.paths).length === 0 &&
        this.model.paths.constructor === Object
      ) {
        return [0, 0];
      }
      var boundRect = makerjs.measure.modelExtents(this.model);
      return [
        boundRect.low[0] * this.viewScale,
        -boundRect.high[1] * this.viewScale,
      ];
    },
    crosshairs_transform() {
      return (
        "translate(" + this.viewPanOffset[0] + "," + this.viewPanOffset[1] + ")"
      );
    },
    svg_html() {
      if (
        this.model.models &&
        Object.keys(this.model.models).length === 0 &&
        this.model.models.constructor === Object &&
        this.model.paths &&
        Object.keys(this.model.paths).length === 0 &&
        this.model.paths.constructor === Object
      ) {
        return "";
      }
      var renderOptions = {
        svgAttrs: {
          origin: this.viewOrigin,
          id: "drawing",
          style:
            "margin-left:" +
            (this.viewPanOffset[0] + this.viewOrigin[0]) +
            "px; margin-top:" +
            (this.viewPanOffset[1] + this.viewOrigin[1]) +
            "px",
        },
        scale: this.viewScale,
        useSvgPathOnly: false,
      };
      return makerjs.exporter.toSVG(this.model, renderOptions);
    },
    gridScale: function () {
      var gridScale = 1;
      while (this.viewScale * gridScale < 6) {
        gridScale *= 10;
      }
      while (this.viewScale * gridScale > 60) {
        gridScale /= 10;
      }
      return gridScale * 10 * this.viewScale;
    },
    transform: function () {
      var p = makerjs.point.add(this.viewPanOffset, this.viewOrigin);
      return "translate(" + p[0] + "," + p[1] + ")";
    },
  },
  methods: {
    wheel(e) {
      this.$store.state.tools.wheel(e, this);
    },
    pointermove(e) {
      this.$store.state.tools.pointermove(e, this);
    },
    pointerup(e) {
      this.$store.state.tools.pointerup(e, this);
    },
    pointerdown(e) {
      this.$store.state.tools.pointerdown(e, this);
    },
  },
  mounted() {
    this.margin = [
      this.$refs.blueprint.offsetLeft,
      this.$refs.blueprint.offsetTop,
    ];
  },
};
</script>

<style scoped>
@import "../assets/css/playground.css";
</style>
